<template>
    <view class="page-box">
        <header class="header"></header>
        <view class="section">
            <view class="top row bothSide verCenter">
                <view class="row verCenter">
                    <image class="pic" :src="incomingDataStatistics.logo" mode="aspectFill"></image>
                    <text class="tt">{{incomingDataStatistics.product_name}}</text>
                </view>
                <navigator class="row verCenter" :url="'/pages/product/detail?id='+product_id" hover-class="none">
                    <text class="t1">产品详情</text>
                    <text class="arrow"></text>
                </navigator>
            </view>
            <view class="info">
                <view class="box column rowCenter verCenter">
                    <text class="t1">{{incomingDataStatistics.order_user_count}}</text>
                    <text class="t2">进件成员</text>
                </view>
                <view class="box column rowCenter verCenter">
                    <text class="t1">{{incomingDataStatistics.pre_order_count}}</text>
                    <text class="t2">预审件数</text>
                </view>
                <view class="box column rowCenter verCenter">
                    <text class="t1">{{incomingDataStatistics.order_count}}</text>
                    <text class="t2">进件件数</text>
                </view>
                <view class="box column rowCenter verCenter">
                    <text class="t1">{{incomingDataStatistics.lending_order_count}}</text>
                    <text class="t2">放款件数</text>
                </view>
                <view class="box column rowCenter verCenter">
                    <text class="t1">{{incomingDataStatistics.lending_amount}}</text>
                    <text class="t2">放款金额(万)</text>
                </view>
                <view class="box column rowCenter verCenter">
                    <text class="t1">{{incomingDataStatistics.order_pass_rate}}</text>
                    <text class="t2">进件通过率</text>
                </view>
            </view>
            <view class="data-analysis">
                <view class="tab row avarage verCenter">
                    <view class="box" v-for="(item,index) in arr" :key="index" @click="tab(index)" :class="{curr:curr==index}">{{item}}</view>
                </view>
                <template v-if="curr == 0">
                    <!-- 进件成员 -->
                    <view class="table-header row avarage verCenter">
                        <text class="col-rank row rowCenter verCenter">排名</text>
                        <text class="col-name">姓名</text>
                        <text class="col-num">进件数</text>
                        <text class="col-num">通过数</text>
                        <text class="col-rate">通过率</text>
                    </view>
                    <view class="table-content">
                        <view class="table-row row avarage verCenter" v-for="(item, index) in orderUserList" :key="index">
                            <view class="col-rank row rowCenter verCenter">
                                <view class="rank-icon" v-if="index < 3"></view>
                                <text v-else>{{ index + 1 }}</text>
                            </view>
                            <text class="col-name">{{ item.name }}</text>
                            <text class="col-num">{{ item.order_count }}</text>
                            <text class="col-num">{{ item.lending_order_count }}</text>
                            <text class="col-rate">{{ item.order_pass_rate }}</text>
                        </view>
                        <view style="height: 72rpx;font-size: 22rpx;color: #2e3233;" class="row rowCenter verCenter" v-if="orderUserList.length == 0">暂无进件成员信息</view>
                    </view>
                </template>
                <template v-else-if="curr == 1">
                    <!-- 数据分析 -->
                    <view class="text-show row bothSide verCenter">
                        <view class="column">
                            <view class="text-show-t1">团队业绩数据统计</view>
                            <view class="text-show-t2">数据更新至{{ time }}</view>
                        </view>
                        <image class="bar" src="http://www.szxlyc.com/uploads/product/20241112/6979378043952970dcfae9edb8d0813c.png" mode="aspectFill"></image>
                    </view>
                    <view class="table-header row avarage verCenter">
                        <text class="col-name">进件信息</text>
                        <text class="col-num">今日</text>
                        <text class="col-num">本月</text>
                        <text class="col-rate">累计</text>
                    </view>
                    <view class="table-content">
                        <view class="table-row row avarage verCenter" v-if="orderDataAnalysis.pre_order_count">
                            <text class="col-info">预审件数</text>
                            <text class="col-num">{{orderDataAnalysis.pre_order_count.today}}</text>
                            <text class="col-num">{{orderDataAnalysis.pre_order_count.curr_month}}</text>
                            <text class="col-num">{{orderDataAnalysis.pre_order_count.total}}</text>
                        </view>
                        <view class="table-row row avarage verCenter" v-if="orderDataAnalysis.order_count">
                            <text class="col-info">进件件数</text>
                            <text class="col-num">{{orderDataAnalysis.order_count.today}}</text>
                            <text class="col-num">{{orderDataAnalysis.order_count.curr_month}}</text>
                            <text class="col-num">{{orderDataAnalysis.order_count.total}}</text>
                        </view>
                        <view class="table-row row avarage verCenter" v-if="orderDataAnalysis.lending_order_count">
                            <text class="col-info">放款件数</text>
                            <text class="col-num">{{orderDataAnalysis.lending_order_count.today}}</text>
                            <text class="col-num">{{orderDataAnalysis.lending_order_count.curr_month}}</text>
                            <text class="col-num">{{orderDataAnalysis.lending_order_count.total}}</text>
                        </view>
                        <view class="table-row row avarage verCenter" v-if="orderDataAnalysis.lending_amount">
                            <text class="col-info">放款金额(万)</text>
                            <text class="col-num">{{orderDataAnalysis.lending_amount.today}}</text>
                            <text class="col-num">{{orderDataAnalysis.lending_amount.curr_month}}</text>
                            <text class="col-num">{{orderDataAnalysis.lending_amount.total}}</text>
                        </view>
                        <view class="table-row row avarage verCenter" v-if="orderDataAnalysis.order_pass_rate">
                            <text class="col-info">进件通过率</text>
                            <text class="col-num">{{orderDataAnalysis.order_pass_rate.today}}</text>
                            <text class="col-num">{{orderDataAnalysis.order_pass_rate.curr_month}}</text>
                            <text class="col-num">{{orderDataAnalysis.order_pass_rate.total}}</text>
                        </view>
                    </view>
                </template>

            </view>
        </view>
        <view class="recommend row bothSide verCenter">
            <view class="text">
                您的团队还有<text class="tt">6</text>人未进件过该产品点击联系【联系TA】，推荐产品过TA吧~
            </view>
            <view class="btn row rowCenter verCenter" @click="notifyUnorderedUser()">推荐TA们进件</view>
        </view>
    </view>
</template>

<script>
    import { API } from "@/util/api.js";
    export default {
        data() {
            return {
                time: '',
                arr: ['进件成员', '数据分析'],
                curr: 0,
                product_id: '',
                incomingDataStatistics: {},
                orderUserList: [],
                orderDataAnalysis: [],
                channel_user_ids: '' //未进件成员ID，多个用英文逗号隔开
            };
        },
        onLoad(options) {
            this.product_id = options.product_id;
        },
        onShow() {
            this.time = this.getCurrentTime();
            this.getIncomingDataStatistics();
            this.getOrderUserList();
        },
        methods: {
            /**
             * 获取当前时间
             */
            getCurrentTime() {
                const now = new Date();
                const year = now.getFullYear();
                const month = String(now.getMonth() + 1).padStart(2, '0');
                const day = String(now.getDate()).padStart(2, '0');
                const hours = String(now.getHours()).padStart(2, '0');
                const minutes = String(now.getMinutes()).padStart(2, '0');
                const seconds = String(now.getSeconds()).padStart(2, '0');
                return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
            },
            tab(index) {
                this.curr = index;
                this.resetChange();
                if (this.curr == 0) {
                    this.getOrderUserList();
                } else if (this.curr == 1) {
                    this.getOrderDataAnalysis();
                }
            },
            /**
             * 进件数据统计
             */
            getIncomingDataStatistics() {
                this.request(API.incomingDataStatistics, "GET", { product_id: this.product_id }, true).then(res => {
                    if (res.code === 0) {
                        this.incomingDataStatistics = res.data;
                    } else {
                        uni.showToast({
                            title: res.msg,
                            icon: "none"
                        });
                    }
                });
            },
            /**
             * 进件成员列表
             */
            getOrderUserList() {
                this.request(API.orderUserList, "GET", { product_id: this.product_id }, true).then(res => {
                    if (res.code === 0) {
                        this.orderUserList = res.data;
                        this.channel_user_ids = res.data.filter(item => item.order_count === 0).map(item => item.channel_user_id).join(',');
                    } else {
                        uni.showToast({
                            title: res.msg,
                            icon: "none"
                        });
                    }
                });
            },
            /**
             * 进件成员列表
             */
            getOrderDataAnalysis() {
                this.request(API.orderDataAnalysis, "GET", { product_id: this.product_id }, true).then(res => {
                    if (res.code === 0) {
                        this.orderDataAnalysis = res.data;
                    } else {
                        uni.showToast({
                            title: res.msg,
                            icon: "none"
                        });
                    }
                });
            },
            notifyUnorderedUser() {
                uni.showModal({
                    title: '',
                    content: '是否确认推荐TA们进件？',
                    success: res => {
                        if (res.confirm) {
                            this.request(API.notifyUnorderedUser, "POST", { product_id: this.product_id, channel_user_ids: this.channel_user_ids }, true).then(res => {
                                if (res.code === 0) {
                                    uni.showToast({
                                        title: '推荐成功',
                                        icon: "success"
                                    });
                                } else {
                                    uni.showToast({
                                        title: res.msg,
                                        icon: "none"
                                    });
                                }
                            });
                        } else if (res.cancel) {
                            // 用户点击取消操作
                            console.log('用户点击取消');
                        }
                    }
                });

            },
            /**
             * 重置数据
             */
            resetChange() {
                this.orderUserList = [];
                this.orderDataAnalysis = [];
            }
        }
    };
</script>

<style scoped lang="scss">
    @import "@/assets/css/order/teamDataAnalysis.scss";
</style>